<template>
  <div class="field-renderer">
    <!-- 字符串类型 -->
    <el-input
      v-if="field.type === FieldType.STRING && mode === 'form'"
      v-model="modelValue"
      :placeholder="`请输入$${r"{field.label}"}`"
      :maxlength="field.maxLength"
      :required="field.required"
      clearable
    />
    
    <!-- 数字类型 -->
    <el-input-number
      v-else-if="(field.type === FieldType.INTEGER || field.type === FieldType.LONG || field.type === FieldType.DOUBLE) && mode === 'form'"
      v-model="modelValue"
      :placeholder="`请输入$${r"{field.label}"}`"
      :precision="field.type === FieldType.DOUBLE ? (field.scale || 2) : 0"
      style="width: 100%"
    />
    
    <!-- BigDecimal类型 -->
    <el-input-number
      v-else-if="field.type === FieldType.BIG_DECIMAL && mode === 'form'"
      v-model="modelValue"
      :placeholder="`请输入$${r"{field.label}"}`"
      :precision="field.scale || 2"
      style="width: 100%"
    />
    
    <!-- 布尔类型 -->
    <el-switch
      v-else-if="field.type === FieldType.BOOLEAN && mode === 'form'"
      v-model="modelValue"
      active-text="是"
      inactive-text="否"
    />
    
    <!-- 日期类型 -->
    <el-date-picker
      v-else-if="field.type === FieldType.LOCAL_DATE && mode === 'form'"
      v-model="modelValue"
      type="date"
      :placeholder="`请选择$${r"{field.label}"}`"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      style="width: 100%"
    />
    
    <!-- 时间类型 -->
    <el-time-picker
      v-else-if="field.type === FieldType.LOCAL_TIME && mode === 'form'"
      v-model="modelValue"
      :placeholder="`请选择$${r"{field.label}"}`"
      format="HH:mm:ss"
      value-format="HH:mm:ss"
      style="width: 100%"
    />
    
    <!-- 日期时间类型 -->
    <el-date-picker
      v-else-if="field.type === FieldType.LOCAL_DATE_TIME && mode === 'form'"
      v-model="modelValue"
      type="datetime"
      :placeholder="`请选择$${r"{field.label}"}`"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      style="width: 100%"
    />
    
    <!-- 显示模式 -->
    <template v-else>
      <!-- 布尔值显示 -->
      <el-tag v-if="field.type === FieldType.BOOLEAN" :type="modelValue ? 'success' : 'danger'">
        {{ modelValue ? '是' : '否' }}
      </el-tag>
      
      <!-- 日期时间格式化显示 -->
      <span v-else-if="field.type === FieldType.LOCAL_DATE_TIME || field.type === FieldType.LOCAL_DATE || field.type === FieldType.LOCAL_TIME">
        {{ formatDateTime(modelValue, field.type) }}
      </span>
      
      <!-- 数字格式化显示 -->
      <span v-else-if="field.type === FieldType.BIG_DECIMAL || field.type === FieldType.DOUBLE">
        {{ formatNumber(modelValue, field.scale) }}
      </span>
      
      <!-- 默认文本显示 -->
      <span v-else>{{ modelValue || '-' }}</span>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { FieldConfig } from '@/types/entity'
import { FieldType } from '@/types/entity'
import { formatDateTime, formatNumber } from '@/utils/formatUtils'

interface Props {
  modelValue: any
  field: FieldConfig
  mode?: 'form' | 'display'
}

interface Emits {
  (e: 'update:modelValue', value: any): void
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'display'
})

const emit = defineEmits<Emits>()

const modelValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
</script>

<style scoped>
.field-renderer {
  width: 100%;
}
</style>